<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鸭办公</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jQuery.js"></script>
</head>

<body>
    <div class="header">
        <div style="margin: 0 auto;width: 600px;">
            <label for="title">小鸭办公</label>
            <input type="text" placeholder="添加事项">
        </div>
    </div>
    <div class="content">
        <div class="doing">
            <h2>正在进行</h2>
            <span>0</span>
        </div>
        <ol>
        </ol>
        <div class="done">
            <h2>已经完成</h2>
            <span>0</span>
        </div>
        <ul>
        </ul>
    </div>
    <script>
        load();
        // 将本地存储的字符串形式的数据 转换为数组对象 JSON.parse()
        var todolist = JSON.parse(localStorage.getItem('todo'))
        $('.header input').keydown(function(event) {
            if (event.keyCode == 13) {
                var local = getDate();
                var text = $(this).val();
                local.push({
                    title: text,
                    done: false
                });
                // 本地存储localStorage是以字符串的形式存储的 所有需要先将数组对象转换为字符串形式 用JSON.stringify()
                saveDate(local);
                load();
                $(this).val('');
            }
        });
        // 删除操作
        $('ol,ul').on('click', 'a', function() {
            // 先获取本地数据
            var data = getDate();
            // 修改数据
            var index = $(this).attr('id');
            data.splice(index, 1);
            console.log(data);
            // 保存到本地存储
            saveDate(data);
            // 重新渲染页面 
            load();
        });

        // 点击复选框 更改done属性值
        $('ol,ul').on('click', 'input', function() {
            // 获取本地数据
            var data = getDate();
            // 修改done属性值
            var index = $(this).siblings('a').attr('id');
            data[index].done = $(this).prop('checked');
            console.log(data);
            // 存储到本地数据
            saveDate(data);
            // 重新渲染页面
            load();
        });


        // 读取本地数据函数
        function getDate() {
            var data = localStorage.getItem('todo');
            if (data !== null) {
                return JSON.parse(data);
            } else {
                return [];
            }
        }
        // 保存本地存储数据函数
        function saveDate(data) {
            localStorage.setItem('todo', JSON.stringify(data))
        }

        // 渲染加载数据
        function load() {
            $('ol').html('');
            $('ul').html('');
            var data = getDate();
            $.each(data, function(i, n) {
                if (n.done) {
                    $('ul').prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a herf='javascript:;' id=" + i + ">×</a></li>")
                } else {
                    $('ol').prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a herf='javascript:;' id=" + i + ">×</a></li>")
                }
            })
            var ol = $("ol li").length;
            console.log(ol);
            $(".doing span").text(ol)
            var ul = $("ul li").length;
            console.log(ul);
            $(".done span").text(ul)
        }
    </script>
</body>

</html>